<template>
  <view class="book_warp safety">
    <swiper class="swiper">
      <swiper-item
        class="swiper-item"
        v-for="item in book.commodityAttachementVOS"
        :key="item.id"
      >
        <image :src="item.fileUrl" mode="aspectFit" />
      </swiper-item>
    </swiper>
    <view class="book_name">{{ book.name }}</view>
    <view class="book_content">
      <rich-text :nodes="book.introduction"></rich-text>
    </view>
    <view class="bottom_warp">
      <view class="btn_warp">
        <view
          class="left_btn btn"
          :style="{
            color: '#f34334',
          }"
        >
          {{ book.coinPrice }}积分
        </view>
        <view class="right_btn btn" @click="clickBottomBtn()"> 立即购买 </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getBookDetail } from "@/api/book";
import { formatRichText } from "@/utils/util.js";
export default {
  data() {
    return {
      book: {},
    };
  },
  onLoad(options) {
    this.getBookDetail(options.id);
  },
  methods: {
    getBookDetail(id) {
      getBookDetail({ id }).then((res) => {
        console.log(res);
        res.introduction = formatRichText(res.introduction);
        this.book = res;
      });
    },
    clickBottomBtn() {
      this.$u.route("pages/pay_order/pay_order", {
        id: this.book.id,
        type: "book",
      });
    },
  },
};
</script>

<style lang="scss">
.book_warp {
  width: 100vw;
  padding-bottom: 60px;
  .swiper {
    width: 100%;
    height: 400upx;
    .swiper-item {
      width: 100%;
      height: 100%;
      background-color: #fff;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
  .book_name {
    margin-top: 20upx;
    background-color: #fff;
    padding: 30upx;
    font-size: 32upx;
    font-weight: 600;
  }
  .bottom_warp {
    width: 100%;
    background: #fff;
    position: fixed;
    left: 0;
    bottom: 0;

    .btn_warp {
      width: 100%;
      height: 60px;
      border-radius: 20upx 20upx 0 0;
      display: flex;
      align-items: center;

      .left_btn {
        background: #fff;
      }

      .right_btn {
        flex: 1;
        color: #fff;
        background: linear-gradient(to right, #fe9601, #f34334);
      }

      .btn {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 36upx;
        font-weight: 700;
      }
    }
  }
}
</style>
